﻿<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getDom.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getRowData.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.tooltip.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false">
    <table id="dg1"></table>
</div>

<script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ID', title: '编号', width: 100 });
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({
                field: 'Sex', title: '性别', width: 90,
                formatter: function (val, row) {
                    return val == "1" ? "男" : (val == "2" ? "女" : "未知");
                }
            });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                {
                    field: 'Remark', title: '备注', width: 90,
                    tooltip: true //表示是否启用该列的 tooptip 效果，只有当 datagrid options 中rowTooltip为false时才有效
                }
            ];
            result.push(normal00000);

            return result;
        };
        var options = {
            title: "把鼠标移动到“备注”列上，以tooltip的方式显示完整的备注内容",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            rowTooltip: true, //是否启用行数据的 tooltip 功能，若该属性为true，则设置在columns中的tooltip会自动失效
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-tooltip-data.json"
        };

        $("#dg1").datagrid(options);
    });
</script>